<html>
<head>
	<!--
	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />
	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery.ui.button.css" />
	-->
	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/black-tie/jquery-ui.css" />

	<style type="text/css">
		.ui-datepicker {
			font-size:10px;
		}
		.ui-button {
			font-size:10px;
		}
		p {color:blue;}
	</style>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
	<script>
		$(function() {
			$( "#datepicker0" ).datepicker();

			var list = ['attr', 'addClass', 'aslice', 'children', 'css', 'eq', 
					'filter', 'find', 'first', 'hasClass', 'height', 'html', 'is', 
					'last', 'map', 'next', 'not', 'offset', 'previous', 'removeAttr', 
					'removeClass', 'scrollTop', 'text', 'toggleClass', 'val', 'width']; 

			$( "#autoc1" ).autocomplete({ 
				source: list,
				minLength: 2,
				delay: 100
			}); 
// 			$( "#autoc1" ).autocomplete(list);

			$( "#add" ).button({
				icons: {
					primary: "ui-icon-calendar"
				}

			}); 

			$( "#resizableWrapper" ).resizable(); 

		});

		function addDate(){
			var count = $("div input").length;
			$("div.demo").append("<input id='datepicker" + count + "' type='text'>");
			$( "#datepicker" + count).datepicker();
		}

		function hitAjax(){
			$.ajax({
				url: 'data.json',
				dataType: 'json',
				success : function(data){
					
					alert(data.widget.window.title);
				}
			})
		}

	</script>

</head>
<body>
	<div class="demo">
		Date: <input style="border: 1px solid; background-color: Gainsboro; border-radius: 4px;" id="datepicker0" type="text">
	</div>
	<button id="add" onClick="addDate();">Add date</button><br/>
	Autocomplete: <input id="autoc1" >
	<input type='checkbox'/>
	<br/>
	<input type='button' onClick="hitAjax();" value="hit ajax!"/>
	<br/>
	overflow:auto and resizable
	
	<div id="resizableWrapper" style="border: 1px solid; height:100px; width: 100px;">
		<div id="resizable" style="overflow: auto; border: 1px solid; height:100%; width:100%;">
			<p>aaa bbb dccc ddd eee fff gg  ghhh h sdfaeja hhg;ah </p>
		</div>
	</div>
	
</body>
</html>

